var if_right_nev_show = false;
var echart_line_set;
$(function () {
    //Layout面板布局
    $("body").jeLayout(
        {
            leftWidth: "90px",        //左侧栏宽度
        }
    );
    $("#myTabNav").find("li").on("click", function () {
        $(this).addClass('curr').siblings().removeClass('curr');
    });
    //折叠菜单
    $(".je-admin-menu").jeAccordion({
        accIndex: 0,
        titCell: "h3",
        conCell: "ul",
        multiple: false,
        success: function (titelem, conelem) {
            //给菜单绑定事件
            conelem.children().on("click", function () {
                conelem.children().removeClass("current");
                $(this).addClass("current");
            });
        }
    });
    //addtabs
    $("[tabpane]").jeTabPane({
        firstItem: {                              //默认首页
            tab: "main",
            text: "地图首页",
            url: "gis.html",
            closable: false
        }
    });

    //日期表单格式
    $("#jedataYear").jeDate({
        format: "YYYY",
        isTime: false,
        multiPane: true,
        minDate: "2016-01-01",
        maxDate: $.nowDate({ DD: 0 }), //最大日期
        onClose: true,
        choosefun: function (elem, val, date) {  //value为选中的值
            queryAqi(val, "year")
        }
    })
    $("#jedataMoth").jeDate({
        format: "YYYY-MM",
        isTime: false,
        minDate: "2016-01-01",
        maxDate: $.nowDate({ DD: 0 }), //最大日期
        onClose: true,
        isinitVal: true,
        choosefun: function (elem, val, date) {  //value为选中的值
            queryAqi(val, "month")
        }
    })
    $("#jedataDay").jeDate({
        format: "YYYY-MM-DD",
        isTime: false,
        onClose: true,
        minDate: "2016-01-01",
        maxDate: $.nowDate({ DD: 0 }),//最大日期
        choosefun: function (elem, val, date) {  //value为选中的值
            queryAqi(val, "day")
        }
    })
});
$("#historyQuery").click(function () {

})

//右侧菜单蓝显示
function right_nev_show() {
    if (if_right_nev_show) {
        $("body").jeLayout(
            {
                leftWidth: "90px",        //左侧栏宽度
            }
        );
        if_right_nev_show = false;
    } else {
        $("body").jeLayout(
            {
                leftWidth: "90px",        //左侧栏宽度
                rightWidth: "200px",                 //右侧栏宽度
            }
        );
        if_right_nev_show = true;
    }
}

//根据日期查询AQI等空气污染指数
function queryAqi(time, type) {
    var query_data;
    if (type == "year") {
        query_data = {
            "queryYearTime": time
        }
    } else if (type == "month") {
        query_data = {
            "queryYearTime": time.substr(0, 4),
            "queryMonthTime": time.substr(5, 2)
        }
    } else if (type == "day") {
        if (time.substr(8, 1) == "0") {
            query_data = {
                "queryYearTime": time.substr(0, 4),
                "queryMonthTime": time.substr(5, 2),
                "queryDayTime": " " + time.substr(9, 1)
            }
        } else {
            query_data = {
                "queryYearTime": time.substr(0, 4),
                "queryMonthTime": time.substr(5, 2),
                "queryDayTime": time.substr(8, 2)
            }
        }
    }
    //http://172.18.63.38:10001/AirDay/GetAQIInfoList?queryMonthTime=01&queryDayTime=%203&queryYearTime=2018
    $.ajax({
        url: 'http://172.18.63.38:10001/AirDay/GetAQIInfoList',
        data: query_data,
        type: 'GET',
        dataType: 'json',
        success: function (aqidata) {
            var Div_aqiHistory = window.frames[0].window.document;
            // 利用jetable控件显示表格数据;
            $(Div_aqiHistory).find("#Div_aqiHistory").jeTable({
                height: "390",
                isPage: false,
                datas: aqidata.rows,
                columnSort: [2, 3, 4],//头部可排序的数，如[1,3,5],其中1表示第一个可排序
                columns: [
                    { name: '日期', field: '日期', width: "80", align: 'left', renderer: "" },
                    { name: 'ID', field: 'id', width: "80", align: 'center', isShow: false, renderer: "" },
                    { name: 'AQI', field: 'AQI', width: "80", align: 'left' },
                    { name: '质量等级', field: '质量等级', width: "80", align: 'left' },
                    { name: 'PM2_5', field: 'PM2_5', width: "80", align: 'left', renderer: "" },
                    { name: 'PM10', field: 'PM10', width: "80", align: 'left', renderer: "" },
                    { name: 'SO2', field: 'SO2', width: "80", align: 'left', renderer: "" },
                    { name: 'CO', field: 'CO', width: "80", align: 'left', renderer: "" },
                    { name: 'NO2', field: 'NO2', width: "80", align: 'left', renderer: "" }
                ],
                success: function (elCell, tbody) {
                }
            })
            window.frames[0].Pane_visible('Pane_aqiHistory', true);
            make_pie_charts(aqidata.rows);
            echart_line_set=aqidata.rows;
            //当表格加载完之后添加折现按钮监听，点击的话显示折线图
            window.frames[0].document.getElementById("Line_chart_history").removeEventListener("click", make_line_charts, false);
            window.frames[0].document.getElementById("Line_chart_history").addEventListener("click", make_line_charts, false);
        },
        error: function (e) {
        },
    });
}

//根据aqi查询出的数据制作echarts数据
function make_pie_charts(echartsdata) {
    //污染程度 严重污染 重度污染 中度污染 轻度污染 良 优
    var yanzhongn = 0, zhongdun = 0, zhongdu2n = 0, qingdun = 0, liangn = 0, youn = 0;
    for (var i = 0; i < echartsdata.length; i++) {
        var airquality = echartsdata[i].质量等级;
        switch (airquality) {
            case "严重污染":
                yanzhongn = yanzhongn + 1;
                break;
            case "重度污染":
                zhongdun = zhongdun + 1;
                break;
            case "中度污染":
                zhongdu2n = zhongdu2n + 1;
                break;
            case "轻度污染":
                qingdun = qingdun + 1;
                break;
            case "良":
                liangn = liangn + 1;
                break;
            case "优":
                youn = youn + 1;
                break;
        }
    }
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
            {
                name: '污染程度比',
                type: 'pie',
                radius: '55%',
                center: ['50%', '40%'],
                data: [
                    { value: yanzhongn, name: '严重污染' },
                    { value: zhongdun, name: '重度污染' },
                    { value: zhongdu2n, name: '中度污染' },
                    { value: qingdun, name: '轻度污染' },
                    { value: liangn, name: '良' },
                    { value: youn, name: '优' }
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    echarts.init(document.getElementById('supplier')).setOption(option);
}
//根据aqi查询出的数据制作echarts折现数据
function make_line_charts() {
    window.frames[0].Pane_Convent("Pane_aqiHistory_Line","Pane_aqiHistory");
    var echartsdata= echart_line_set;
    var line_data = [];
    for (var i = 0; i < echartsdata.length; i++) {
       
        var aqi_data = [ echartsdata[i].日期.substr(6, 4)+"-"+echartsdata[i].日期.substr(0, 2)+"-"+echartsdata[i].日期.substr(3, 2), echartsdata[i].AQI];
        line_data.push(aqi_data);
    }
    var  option = {
        title: {
            text: 'AQI K线图'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            data: line_data.map(function (item) {
                return item[0];
            })
        },
        yAxis: {
            splitLine: {
                show: false
            }
        },
        toolbox: {
            left: 'center',
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        dataZoom: [{
            type: 'inside'
        }],
        visualMap: {
            top: 10,
            right: 10,
            pieces: [{
                gt: 0,
                lte: 60,
                color: '#096'
            }, {
                gt: 60,
                lte: 90,
                color: '#ffde33'
            }, {
                gt: 90,
                lte: 120,
                color: '#ff9933'
            }, {
                gt: 120,
                lte: 150,
                color: '#cc0033'
            }, {
                gt: 150,
                lte: 300,
                color: '#660099'
            }, {
                gt: 300,
                color: '#7e0023'
            }],
            outOfRange: {
                color: '#999'
            }
        },
        series: {
            name: 'AQI',
            type: 'line',
            data: line_data.map(function (item) {
                return item[1];
            }),
            markLine: {
                silent: true,
                data: [{
                    yAxis: 60
                }, {
                    yAxis: 90
                }, {
                    yAxis: 120
                }, {
                    yAxis: 150
                }, {
                    yAxis: 300
                }]
            }
        }
    }
    echarts.init(window.frames[0].document.getElementById('Div_aqiHistory_Line')).clear();
   echarts.init(window.frames[0].document.getElementById('Div_aqiHistory_Line')).setOption(option);
   //转化为折现图后要监听转换表格按钮，点击按钮转化为表格面板
   window.frames[0].document.getElementById("Table_chart_history").addEventListener("click", function(){window.frames[0].Pane_Convent("Pane_aqiHistory","Pane_aqiHistory_Line")}, false);
}